<template></template>
<script  lang="ts">
import { ICalendar } from '@/types/calendar';
import { h, inject, Ref } from 'vue';
import Item from './item.vue';
function MyComponent(props: { day: string }) {
  const calendarMap = inject<Ref<Map<string, ICalendar[]>>>("calendarMap")

  const item = calendarMap?.value.get(props.day);

  if (item) {
    return item.map((ii, index) => {
      if (index == 3) {
        return h("div", { innerHTML: "+" + (item.length - index), class: ["more"] })
      }
      if (index > 3) return;

      return h(Item, {
        title: ii.name,
        isUp: ii.isUp,
        time: ii.time
      })

    })
  }

}

export default MyComponent





</script>


<style lang="scss" scoped>
.more {
  position: absolute;
  background-color: #3F8CFF;
  border-radius: 50%;
  color: white;
  font-size: 12px;
  padding: 3px 4px;
  bottom: 4px;
  right: 4px;
}
</style>